<template>
  <view>
    <canvas  id="tutorial" type="2d" style="width: 750rpx; height: 750rpx;" ></canvas>
    <view v-for="(item,index) in data" :key="index">
    </view>
  </view>
</template>

<script>
  import {randomRed} from "../../utils/randomRed.js"
  export default {
    name:"bar",
    data() {
      return {
      };
    },
    props:{
      propdata:{
        type:Array
      }
    },
   
    created() {
      this.create2D()
    },
    methods:{
      create2D(){
        wx.createSelectorQuery().in(this)
            .select('#tutorial') // 在 WXML 中填入的 id
            .fields({ node: true, size: true })
            .exec((res) => {
                // Canvas 对象
                const canvas = res[0].node
                // 渲染上下文
                const ctx = canvas.getContext('2d')
                let totle = this.data.reduce((pre,cur) => pre+cur.count,0)
                const width = res[0].width
                const height = res[0].height
                canvas.width = width
                canvas.height = height
                let begin = 0
                let end = 0
                for(let i = 0;i<this.data.length;i++){
                  ctx.beginPath();
                  ctx.moveTo(width / 2,width / 2);
                  end = this.data[i].count / totle 
                  let linewidth = width * end
                  ctx.shadowOffsetX = 4;
                  ctx.shadowOffsetY = 4;
                  ctx.shadowColor = randomRed();
                  ctx.shadowBlur = 10;
                  let textangle = begin + end + begin
                  let x = width / 2 + Math.cos(textangle*Math.PI)*(width / 4 + 40)
                  let y = width / 2 + Math.sin(textangle*Math.PI)*(width / 4 + 40)
                  ctx.arc(width / 2 , width / 2, linewidth, begin * 2 * Math.PI, (begin + end) * 2 * Math.PI);
                  ctx.font="23px arial";
                  ctx.fillText(this.data[i]._id,x,y)
                  ctx.fillStyle=randomRed();
                  ctx.fill();
                  begin = begin + end
                }
            })
       
      }
    },
    computed: {
    			data() {
    				return this.propdata;
    			}
    		},

  }
</script>

<style lang="scss">

</style>